class QuestionItem extends HTMLElement {
  static style = `
    .question-item {
      display: flex;
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 5px;
      justify-content: space-between;
    }
    
    .question-item .left-section {
      width: 30%;
      display: flex;
      flex-direction: column;
      margin-left: 50px;
    }
    
    .question-item .left-section .question-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
    
    .question-item .left-section .question-option {
      font-size: 14px;
      font-weight: 400;
      color: #999;
      padding-left: 30px;
      margin-top: 10px;
      /* flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px; */
    }
    
    .question-option .option-item {
      margin-top: 10px;
    }
    
    .question-item .right-section {
      margin-left: 50px;
      width: 40%;
    }
    .right-section .result-item {
      margin-top: 10px;
      width: 100%;
      /* height: 30px; */
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .result-item:first-child {
      margin-top: 22px;
    }
    
    .result-item .progress {
      width: 70%;
      height: 10px;
      /* background-color: #eee; */
      border: 1px solid #ccc;
      position: relative;
    }
    
    .result-item .progress::-webkit-progress-bar {
      background-color: #fff;
    }
    .result-item .progress::-webkit-progress-value {
      background-color: var(--color-primary);
      /* border: 1px solid #ccc; */
    }
    
    .result-item .progress-value {
      font-size: 12px;
    }
    
    .result-graph {
      width: 70%;
      height: 150px;
      margin-top: 20px;
    }
    
  `
  static option = {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "60%",
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }

  static get observedAttributes() {
    return ["question"]
  }

  constructor() {
    super()
    this._shadowRoot = this.attachShadow({ mode: "open" })
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "question") {
      this._question = JSON.parse(newValue)
      this.render()
    }
  }

  render() {
    let style = document.createElement("style")
    style.innerHTML = QuestionItem.style
    this._shadowRoot.appendChild(style)

    let item = document.createElement("div")
    item.classList.add("question-item")
    item.innerHTML = `
      <section class="left-section">
      <div class="question-title">
        <span class="question-title-index">Q${this._question.index}</span>
        <span class="question-title-text">${this._question.title}</span>
      </div>
      <div class="question-option"></div>
      </section>
      <section class="right-section">
        <div class="result-title">${
          this._question.type === 3 ? "有效回答占比" : "数据占比"
        }</div>
        <div class="result-container">
        </div>
      </section>
    `

    if (this._question.type === 1) {
      return this.singleChoice(item)
    }
    if (this._question.type === 2) {
      return this.multipleChoice(item)
    }
    if (this._question.type === 3) {
      return this.textChoice(item)
    }
  }

  singleChoice(item) {
    let optionContainer = item.querySelector(".question-option")
    let resultContainer = item.querySelector(".result-container")

    let sum = this._question.datas.reduce((sum, option) => {
      return sum + option.value / 1
    }, 0)

    this._question.datas.forEach((data, index) => {
      let optionItem = document.createElement("div")
      optionItem.classList.add("option-item")
      optionItem.innerHTML = `${data.name}`
      optionContainer.appendChild(optionItem)

      let resultItem = document.createElement("div")
      resultItem.classList.add("result-item")
      resultItem.innerHTML = `
        <progress class="progress" value="${
          (data.value / sum).toFixed(0) * 100
        }" 
        max="100"></progress>
        <span class="progress-value">${
          (data.value / sum).toFixed(0) * 100
        }%</span>
      `
      resultContainer.appendChild(resultItem)
    })

    this._shadowRoot.appendChild(item)
  }

  multipleChoice(item) {
    let optionContainer = item.querySelector(".question-option")
    let resultContainer = item.querySelector(".result-container")
    this._question.datas.forEach((data, index) => {
      let optionItem = document.createElement("div")
      optionItem.classList.add("option-item")
      optionItem.innerHTML = `${data.name}`
      optionContainer.appendChild(optionItem)
    })

    let resultGraph = document.createElement("div")
    resultGraph.classList.add("result-graph")
    let myChart = echarts.init(resultGraph)
    let option = QuestionItem.option
    option.series[0].data = this._question.datas
    myChart.setOption(option)

    window.addEventListener("resize", function () {
      myChart.resize()
    })
    resultContainer.appendChild(resultGraph)
    this._shadowRoot.appendChild(item)
    myChart.resize()
  }

  textChoice(item) {
    let resultContainer = item.querySelector(".result-container")

    this._question.datas.forEach((data, index) => {
      let resultItem = document.createElement("div")
      resultItem.classList.add("result-item")

      let result = Math.floor(Math.random() * 100)
      resultItem.innerHTML = `
        <progress class="progress" value="${result}" max="100"></progress>
        <span class="progress-value">${result}%</span>
      `
      resultContainer.appendChild(resultItem)
    })

    this._shadowRoot.appendChild(item)
  }
}

customElements.define("question-item", QuestionItem)

export default QuestionItem
